<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 4px;
        }
        @keyframes rotate {
            to {
                transform: rotate(1turn);
            }
        }
        .under {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid yellow;
            border-right: 200px solid green;
            border-bottom: 200px solid red;
            border-left: 200px solid blueviolet;
            left: -125px;
            top: -125px;
            animation: rotate 2s linear infinite;
        }
        .box > span {
            position: absolute;
            top: 0px;
            margin: 8px;
            width: 134px;
            height: 134px;
            border-radius: 4px;
            background-size: cover;
            background-image: url(https://i.postimg.cc/mgsKJGLw/susu1.jpg);
            background-color: white;
        }
        @keyframes rotate2 {
            to {
                transform: rotate(-1turn);
            }
        }
        .box .under2 {
            position: relative;
            width: 0px;
            height: 0px;
            border-top: 200px solid rgb(0, 255, 13);
            border-right: 200px solid rgb(45, 218, 203);
            border-bottom: 200px solid rgb(255, 106, 156);
            border-left: 200px solid rgb(251, 255, 26);
            left: -125px;
            top: -125px;
            animation: rotate2 2s linear infinite;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div class="under"></div>
        <span></span>
    </div>
    <div class="box">
        <div class="under2"></div>
        <span></span>
    </div>
</body>
 
</html>